import React, { Component } from 'react'
class Searchbox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShow: false,
            values: [
                "第一",
                "第二",
                "第三",
                "第四",
                "第五",
                "第六",
                "第七",
                "第八",
                "第九",
            ],
            valuesIndex: -1,//给一个默认下标
            value: ""//先给它一个空的数据
        }
    }

    render() {
        return (
            <div>
                <input type="text" ref="input"
                    value={this.state.value}
                    placeholder={this.props.plat}
                    className="inputvalue"
                    onFocus={() => {
                        this.setState({
                            isShow: true
                        })
                        console.log(this.state);
                    }}
                    //失去焦点时改变state里面的状态
                    onBlur={() => {
                        setTimeout(() => {
                            this.setState({
                                isShow: false
                            })
                        }, 2000)

                        console.log(this.state)
                    }}
                    onKeyDown={(event) => {
                        if (event.keyCode == "13") {
                            var input = this.refs.input
                            var aa = input.value
                            console.log(aa);

                            // this.setState({
                            //     valu:values
                            // })
                            // this.state.values.push(a)
                            
                        } else if (event.keyCode == "40") {
                            console.log('111');
                            console.log(this.state.valuesIndex);
                            this.state.valuesIndex++;
                            if (this.state.valuesIndex > this.state.values.length - 1) {
                                this.state.valuesIndex = 0;
                            }
                            //双重判断如果按下上键就让默认的下标减减
                        } else if (event.keyCode == "38") {
                            this.state.valuesIndex--;
                            if (this.state.valuesIndex < 0) {
                                this.state.valuesIndex = this.state.values.length - 1
                            }
                        }
                        //再次改变状态
                        this.setState({
                            valuesIndex: this.state.valuesIndex,
                            value: this.state.values[this.state.valuesIndex]
                        })
                    }} />


                {/* <button onClick={() => {
                    var input = this.refs.input
                    console.log(input.value);
                }}>点击</button> */}


                <div className={this.state.isShow ? "history" : "historyon"}>
                    {
                        this.state.values.map((element, index) => {
                            return <div className={this.state.valuesIndex === index ? "valueshi dele" : "dele"}
                                onMouseEnter={() => {
                                    this.setState({
                                        valuesIndex: index,
                                        value: this.state.values[this.state.valuesIndex]
                                    })
                                }}><div>{element}</div>
                                <button className={this.state.valuesIndex == index ? 'deletes de' : 'deletess'}
                                    onClick={() => {
                                        this.state.values.splice(this.state.valuesIndex, 1)
                                        this.setState({
                                            values: this.state.values
                                        })
                                    }}>删除</button>
                            </div>
                        })
                    }
                </div>
            </div>
        )
    }
}

export default Searchbox;